<template>
    <!-- 添加sku -->
    <div>
        <el-form ref="form"  label-width="80px" :data="skuInfo">
            <el-form-item label="SPU名称">{{spuName}}</el-form-item>

            <el-form-item label="SKU名称">
                <el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
            </el-form-item>

            <el-form-item label="价格(元)">
                <el-input type="number" placeholder="价格(元)" v-model="skuInfo.price"></el-input>
            </el-form-item>

            <el-form-item label="重量(千克)">
                <el-input placeholder="重量(千克)" v-model="skuInfo.weight"></el-input>
            </el-form-item>

            <el-form-item label="规格描述">
                <el-input type="textarea" placeholder="规格描述" v-model="skuInfo.skuDesc" rows="5"></el-input>
            </el-form-item>

            <el-form-item label="平台属性">
                <el-form :inline="true" class="demo-form-inline" :label-position="labelPosition">
                    <el-form-item :label="attr.attrName" style="margin-left: 20px" v-for="(attr,index) in attrInfoList" :key="attr.id">
                        <!-- 数据收集到attr身上   将来要整理发送给服务器 -->
                        <el-select placeholder="请选择" v-model="attr.attrIdAndValueId">
                            <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`" v-for="(attrValue,index) in attr.attrValueList" :key="attrValue.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>

            <el-form-item label="销售属性">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item :label="saleAttr.saleAttrName" style="margin-left: 20px" v-for="(saleAttr,index) in spuSaleAttrList" :key="saleAttr.id">
                        <el-select placeholder="请选择" v-model="saleAttr.saleAttrIdAndValueId">
                            <el-option :label="saleAttrValue.saleAttrValueName" :value="`${saleAttr.id}:${saleAttrValue.id}`" v-for="(saleAttrValue,index) in saleAttr.spuSaleAttrValueList" :key="saleAttrValue.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>


            <el-form-item label="图片列表">
                <el-table style="width: 100%" border :data="spuImageList"  @selection-change="handleSelectionChange">>
                    <el-table-column type="selection" width="80" align="center"></el-table-column>

                    <el-table-column prop="date" label="图片" >
                        <template slot-scope="{row,$index}">
                            <img :src="row.imgUrl" alt="" style="width: 100px;height: 100px">
                        </template>
                    </el-table-column>

                    <el-table-column prop="imgName" label="名称" ></el-table-column>

                    <el-table-column prop="address" label="操作" width="180">
                        <template slot-scope="{row,$index}">
                            <el-button type="primary" size="mini" v-if="row.isDefault==0" @click="changeIsDefault(row)">设为默认</el-button>
                            <el-button type="success" size="mini" v-else @click="changeDefault(row)">默认</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>

            <el-form-item style="margin-top: 10px">
                <el-button type="primary" @click="save">保存</el-button>
                <el-button @click="quXiao">取消</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
export default {
    name: "SkuForm",
    data() {
        return {
            // 平台属性对齐方式
            labelPosition:'right',
            // 存储图片的信息
            spuImageList:[],
            // 存储销售属性
            spuSaleAttrList:[],
            // 存储平台属性
            attrInfoList:[],
            // 收集SkuForm数据
            skuInfo:{
                // 第一类收集的数据：父组件给的数据
                category3Id: 0,
                spuId: 0,
                tmId: 0,
                // 第二类，需要通过v-model双向绑定收集
                skuName: "",
                price: '',
                skuDesc: "",
                weight: "",
                // 第三类，需要自己写代码
                // 设置默认图片
                skuDefaultImg: "",
                // 收集平台属性的数据
                skuAttrValueList: [
                    /*{
                        attrId: 0,
                        valueId: 0
                    }*/
                ],
                // 收集图片
                skuImageList: [
                    /*{
                        id: 0,
                        imgName: "string",
                        imgUrl: "string",
                        isDefault: "string",
                        skuId: 0,
                        spuImgId: 0
                    }*/
                ],
                // 收集销售属性的数据
                skuSaleAttrValueList: [
                    /*{
                        id: 0,
                        saleAttrId: 0,
                        saleAttrName: "string",
                        saleAttrValueId: 0,
                        saleAttrValueName: "string",
                        skuId: 0,
                        spuId: 0
                    }*/
                ],

            },
            // 保存父组件传过来的spuName
            spuName:'',
            // 收集图片的数据字段,但是需要注意，当前缺少isDefault字段,将来提交给服务器数据的时候，需要整理参数
            imageList:[],
        }
    },
    methods:{
        // 点击保存，触发
        async save() {
            // 整理参数
            // 1. 整理平台属性
            // 解构
            const {attrInfoList,skuInfo,spuSaleAttrList,imageList} = this
            attrInfoList.forEach(item => {
                // 表示用户进行了选择
                if (item.attrIdAndValueId) {
                    const attrId = item.attrIdAndValueId.split(':')[0]
                    const valueId = item.attrIdAndValueId.split(':')[1]
                    // 携带给服务器的应该是对象
                    let attrInfoObj = {attrId,valueId}
                    // 将整理好的数据赋值给最终要携带给服务器数据中的skuAttrValueList  // 把对象添加到数组中
                    skuInfo.skuAttrValueList.push(attrInfoObj)
                }
            })
            // 2. 整理销售属性
            spuSaleAttrList.forEach(item => {
                // 表示用户进行了选择
                if (item.saleAttrIdAndValueId) {
                    const saleAttrId = item.saleAttrIdAndValueId.split(":")[0]
                    const saleAttrValueId = item.saleAttrIdAndValueId.split(":")[1]
                    // 携带给服务器的应该是对象
                    let saleAttrInfoObj = {saleAttrId,saleAttrValueId}
                    // 把整理号的数据添加到spuSaleAttrList中
                    skuInfo.skuSaleAttrValueList.push(saleAttrInfoObj)
                }
            })
            // 3. 整理图片列表
            skuInfo.skuImageList = imageList.map(item => {
                return {
                    imgName: item.imgName,
                    imgUrl: item.imgUrl,
                    isDefault: item.isDefault,
                    spuImgId: item.id
                }
            })
            // 发请求
            let rASResult = await this.$API.spu.reqAddSku(skuInfo)
            console.log(rASResult)
            if (rASResult.code==200) {
                this.$message.success('添加Sku成功')
                this.$emit('changeSkuFormScene',0)
            } else {
                this.$message.error('保存失败')
            }
        },
        // 由父组件通知，添加Sku数据       接收父组件传过来的数据，其中，接口需要用到 row身上的id和category3Id，和另外传的category1Id，category2Id
        async getSkuDate (category1Id,category2Id,row) {
            // console.log(row)
            // 收集父组件给的数据,存到当前组件身上
            this.skuInfo.category3Id = row.category3Id
            this.skuInfo.spuId = row.id
            this.skuInfo.tmId = row.tmId
            this.spuName = row.spuName
            // 获取图片的数据
            let rSILResult = await this.$API.spu.reqSpuImageList(row.id)
            // console.log(rSILResult)
            if(rSILResult.code == 200) {
                let list = rSILResult.data
                // 给每个获取到的图片加一个属性 isDefault ，为0是设置默认，1是默认
                list.forEach(item => {
                    item.isDefault = 0
                })
                this.spuImageList = list
            }

            // 获取销售属性的数据
            let rSSALResult = await this.$API.spu.reqSpuSaleAttrList(row.id)
            // console.log(rSSALResult)
            if(rSSALResult.code == 200) {
                this.spuSaleAttrList = rSSALResult.data
            }

            // 获取平台属性的数据
            let qAILResult = await this.$API.spu.reqAttrInfoList(category1Id,category2Id,row.category3Id)
            // console.log(qAILResult)
            if(qAILResult.code == 200) {
                this.attrInfoList = qAILResult.data
            }
        },
        // 取消按钮
        quXiao () {
            // 通知父组件，切换场景
            this.$emit('changeSkuFormScene',0)
            // 清除数据
            Object.assign(this._data,this.$options.data())
        },
        // 选中图片
        handleSelectionChange(val) {
            // 获取到用户选中图片的信息数据，但是需要注意，当前收集的数据当中，缺少isDefault字段
            // console.log(val)
            this.imageList = val;
        },
        // 点击 设置默认 按钮，显示 默认 按钮  ，排他操作
        changeIsDefault(row) {
            // 点击，先让所有的按钮都为0 ，即为 设置默认 按钮
            this.spuImageList.forEach(item => {
                item.isDefault = 0
            })
            // 点击谁，谁就变为 默认 按钮
            row.isDefault = 1
            // 收集数据
            this.skuInfo.skuDefaultImg = row.imgUrl
        },
        // 点击 默认 按钮，变为 设置默认 按钮
        changeDefault(row) {
            row.isDefault = 0
        }
    }
}
</script>

<style scoped>

</style>
